<template>
	<el-table class="report-table" :data="tableList" v-loading="loading" :row-class-name="getRowClassName" :border="false" :span-method="objectSpanMethod">
		<el-table-column v-for="(item, index) in tableHeaderList" :key="index" :label="item.label" :formatter="defaultTableData" :align="item.isTxt ? 'left' : 'right'">
			<template #default="scope">
				<template v-if="item.list && item.list.length > 0">
					<el-table-column v-for="(child, childIndex) in item.list" :key="childIndex" :label="child.label" :align="item.isTxt ? 'left' : 'right'">
						<template #default="scope">
							<span v-if="child.isTxt">{{ scope.row[child.order].value }}</span>
							<el-input v-else :class="{ 'no-shadow-input': handleType == 'info' }" maxlength="10" size="small" v-model="scope.row[child.order].value" placeholder=" " :disabled="isReadOnly" @input="validateInput(scope.row, child.order)" @blur="handleBlur(scope.row, child.order)">
								<template v-if="child.unit" #append>{{ child.unit }}</template>
							</el-input>
						</template>
					</el-table-column>
				</template>

				<template v-else>
					<span :class="{ 'padding-left-30': index == 0 && scope.row[item.order].level == 3 }" v-if="item.isTxt">{{ scope.row[item.order].value }}</span>
					<el-input v-else :class="{ 'no-shadow-input': handleType == 'info' }" maxlength="10" size="small" v-model="scope.row[item.order].value" placeholder=" " :disabled="isReadOnly" @input="validateInput(scope.row, item.order)" @blur="handleBlur(scope.row, item.order)">
						<template v-if="item.unit" #append>{{ item.unit }}</template>
					</el-input>
				</template>
			</template>
		</el-table-column>
	</el-table>
</template>

<script setup>
	import { ref } from 'vue';
	import { defaultTableData, deepClone } from '@/utils/publicUtils';
	import { toThousands } from '@/utils/number-util';

	const props = defineProps({
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		tableHeaderList: { type: Array },
		loading: { type: Boolean, default: false },
		tableList: { type: Array },
		rowClassName: { type: Function, default: () => () => '', required: false },
		objectSpanMethod: { type: Function, default: () => () => '', required: false },
	});

	let loading = ref(false);

	//提交
	const getParams = () => {
		let list = deepClone(props.tableList);
		list.forEach(item => {
			item.forEach((child, childIndex) => {
				let tHeaderList = transformDimension();
				let toThousandsVal = tHeaderList[childIndex].unit ? toThousands(child.value) + tHeaderList[childIndex].unit : toThousands(child.value);
				child.value = !isNaN(child.value) && child.value != '-' && !child.isTxt ? toThousandsVal : child.value;
			});
		});
		return list;
	};

	//tableHeaderList二维转一维
	const transformDimension = () => {
		let result = [];
		let targetlList = deepClone(props.tableHeaderList);
		targetlList.forEach(item => {
			if (item.list && item.list.length > 0) {
				item.list.forEach(child => {
					result.push(child);
				});
			} else {
				result.push(item);
			}
		});
		return result;
	};

	//表格颜色
	const getRowClassName = data => {
		return props.rowClassName(data);
	};

	//合并单元格
	const objectSpanMethod = ({ rowIndex, columnIndex }) => {
		return props.objectSpanMethod({ rowIndex, columnIndex });
	};

	// 只允许输入正负数的验证函数
	const validateInput = (row, index) => {
		// 移除非法字符，保留数字、负号、小数点
		row[index].value = row[index].value
			.replace(/[^0-9.-]/g, '') // 只允许数字、小数点和负号
			.replace(/(?!^)-/g, '') // 负号只能在第一位，移除其他位置的负号
			.replace(/(?!\d*\.\d*$)\./g, '') // 只允许一个小数点，移除多余的小数点
			.replace(/(\.\d{2})\d*/g, '$1'); // 保留最多四位小数

		// 如果小数点开头，自动补0
		if (row[index].value.startsWith('.')) {
			row[index].value = '0' + row[index].value;
		}

		// 只输入负号时不做进一步处理
		if (row[index].value === '-') return;
	};

	// 校验最后一位是不是 .
	const handleBlur = (row, index) => {
		if (row[index].value.endsWith('.')) {
			row[index].value = row[index].value.slice(0, -1); // 移除最后一位小数点
		}
		// if (row[index].value === '-') row[index].value = '';
	};

	defineExpose({ getParams });
</script>

<style>
	.padding-left-30 {
		padding-left: 30px;
	}
</style>
